<template>
    <div id="map">
        <div class="MapTool">
            <div class="block">
                <span class="demonstration">曝光量</span>
                <el-slider v-model="variables.exposure" :min="-1" :max="1" :step="0.01" @change="handleChange($event,'exposure')"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">对比度</span>
                <el-slider v-model="variables.contrast" :min="-1" :max="1" :step="0.01" @change="handleChange($event,'contrast')"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">饱和度</span>
                <el-slider v-model="variables.saturation" :min="-1" :max="1" :step="0.01" @change="handleChange($event,'saturation')"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">亮度值</span>
                <el-slider v-model="variables.brightness" :min="-1" :max="1" :step="0.01" @change="handleChange($event,'brightness')"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">伽马值</span>
                <el-slider v-model="variables.gamma" :min="0" :max="100" :step="1" @change="handleChange($event,'gamma')"></el-slider>
            </div>
        </div>
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import TileLayer from 'ol/layer/WebGLTile';
    import View from 'ol/View';
    import {OSM} from 'ol/source';

    export default {
        name: "WebGLTileStyleLayer",
        data() {
            return {
                variables :{
                    exposure: 0,//曝光度
                    contrast: 0,//对比度
                    saturation: 0,//饱和度
                    brightness:0,//亮度值
                    gamma:1//伽马值
                }
            };
        },
        mounted() {

            this.tileLayer = new TileLayer({
                style: {
                    brightness:['var', 'brightness'],
                    gamma:['var', 'gamma'],
                    exposure: ['var', 'exposure'],
                    contrast: ['var', 'contrast'],
                    saturation: ['var', 'saturation'],
                    variables: this.variables,
                },
                source: new OSM(),
            });
            //初始化地图
            this.map = new Map({
                target: "map", //指定挂载dom，注意必须是id
                layers: [this.tileLayer],
                //配置视图
                view: new View({
                    center: [0, 0],
                    zoom: 0,
                }),
            });
        },
        methods:{
            handleChange(val,type){
                const updates = {};
                updates[type] = val;
                //更新瓦片样式对应的变量
                this.tileLayer.updateStyleVariables(updates);
            }
        }
    };
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
        width: 250px;
    }
</style>